\chapter{Project Implementation | Michael Ries}\label{chap:projectImplementation}

\section{Webshop Installation}\label{sec:webshopInstallation}
This section will guide through the necessary steps to install the OXID eShop Community Edition \footnote{http://www.oxid-esales.com/en/products/community-edition}. The shop is licensed under the GPL v3. For the GreenGadget shop we used the current version v4.4.8. The following subsections are based on this version and may not apply to future releases.

\subsection{System Requirements}
Oxid eShop requires several components installed on the system before the installation can take place. The software is written in PHP and uses MySQL which runs platform independent on Apache webservers. Most hosting platforms should meet the requirements already since no special components or adaptations are needed.

\subsubsection{Webserver}
\begin{itemize}
	\item Apache Version 1.3 or above
	\item at least 100 MB of free webspace
	\item an installed \textit{mod\_rewrite} module
\end{itemize}

\subsubsection{MySQL}
\begin{itemize}
	\item MySQL 5.0.42 or above
\end{itemize}

\subsubsection{PHP}
\begin{itemize}
	\item PHP 5.2.0 or above. Recommended: PHP 5.2.6 or above
	\item Set \textit{memory\_limit} at least to 14 MB. We recomend a \textit{memory\_limit} of 30MB
	\item Activate \textit{allow\_url\_fopen} or \textit{fsockopen} to port 80
	\item Set Apache server variables \textit{REQUEST\_URI} or \textit{SCRIPT\_URI}
	\item Switch off PHP4 compatibility mode. (\textit{zend.ze1\_compatibility\_mode = Off})
	\item \textit{ini\_set} allowed
	\item \textit{register\_globals} off
	\item The following PHP-extensions must be installed:	
	\begin{itemize}
		\item \textit{GD LIB} Version 2.x
		\item \textit{MySQL} client connector for MySQL 5
		\item \textit{bcmath}
		\item \textit{JSON}
		\item \textit{php-xml}
		\item \textit{libxml2}
		\item \textit{iconv-extension}
		\item \textit{tokenizer}
		\item \textit{mbstring}
	\end{itemize}
\end{itemize}

\subsection{Installation}
Having a working hosting infrastructure, installation basically involves only a few steps:

\begin{itemize}
	\item unzip the downloaded file and upload it to your webserver via FTP
	\item create a blank database
	\item point your browser to \url{http://www.yourshop.com} and follow the instructions of the installation script
\end{itemize}

After opening the shop URL the user is presented with the shop's installation wizard which figure \ref{fig:oxidsetup} shows. The setup procedure is straightforward and consists of only six steps.

\begin{figure}[H]
\begin{center}
\includegraphics[scale=0.6]{images/oxidsetup.png}
\end{center}
\caption{Oxid eShop installation wizard}
\label{fig:oxidsetup}
\end{figure}

After finishing the setup, the user is presented with the default look and feel theme of the shop. To configure further details, Oxid offers a backend interface which is reachable at \url{http://www.yourshop.com/admin}. To fully customize the shop further actions need to be taken which the following section describes in detail.

\section{Webshop Customization}\label{sec:webshopCustomization}
To meet the design and feature requirements, the default installation of the webshop needs to be customized. Oxid offers several mechanisms for adjusting the look and feel and adapting the functionality of the shop. The following subsections will give an overview about the changes that were made to achieve the final look of the shop.

\subsection{Functional Changes}
Oxid eShop is a feature rich shop software. To configure, add and remove features it offers a dedicated backend interface. 

\subsubsection{Settings}
With the help of the backend interface, the shop can be administered by users which are in the \textit{Shop-Admin} group. The interface is split into several sections:

\begin{description}
	\item[Master Settings]Core settings like name of the shop, feature settings, E-Mail settings, available languages, etc.
	\item[Shop Settings]Shipping, Payment, Discount options.
	\item[Administer Products]Here products can be added, removed, edited and categories can be defined.
	\item[Administer Users]The user and group management.
	\item[Administer Orders]Orders can be reviewed and processed here.
	\item[Customer Info]Customer information like the Newsletter and dynamic CMS pages are managed here.
\end{description}

Figure \ref{fig:oxidsettings} shows the backend interface used to adapt the settings for the GreenGadget shop.

\begin{figure}[H]
\begin{center}
\includegraphics[scale=0.55]{images/oxidsettings.png}
\end{center}
\caption{Oxid eShop backend: Master settings}
\label{fig:oxidsettings}
\end{figure}

\subsubsection{Dynamic Content: CMS pages}
CMS pages manage several types of content: customer information, e-mails, texts that are used in particular areas of the eShop, etc.

The CMS pages can be found in the backend interface navigating to Customer Info -> CMS pages. A list of all CMS pages is displayed in the top half. The content of CMS pages can be edited using the text editor for all configured languages.

The start page of the GreenGadget shop is a dynamic page which welcomes a user using his name or ``Stranger'' in case the user is not logged in. Listing \ref{lst:welcome} shows the code of this particular CMS page:

\begin{code}
\lstset{language=HTML, basicstyle=\tiny, caption=CMS Page: Welcome, captionpos=b, label=lst:welcome}
\begin{lstlisting}
<h1><strong>Hello </strong>
[{ if $oxcmp_user }]
	[{ $oxcmp_user->oxuser__oxfname->value }] [{ $oxcmp_user->oxuser__oxlname->value}]!
	</h1><p>You can view your Wishlist 
	<a href="[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=account_noticelist" }]">here</a>.</p>
[{elseif !$oxcmp_user}] 
	Stranger!</h1>
	<p>Please login to view your Wishlist and Orders!</p>
[{/if}]
\end{lstlisting}
\end{code}

The code in brackets is what the page makes dynamic. Variables can be referenced this way or functions can be called. Here the \textit{oxgetseourl} function is called to get the link to the user's wishlist. See the template section for more information about the code in brackets.

\subsection{Design Changes}
Once the functionality and settings are adapted, the design of the shop has to be changed. This includes changing the colors, text styles but also the templates which state what text is shown where. Also the shop logo can be changed by modifying the templates. The changes were applied to the original default theme which comes with the Oxid eShop installation.

Each shop page consists of several HTML elements which are classified using \textit{class} attributes. Therefore the look and feel for each class of elements can be adapted either using the built-in Color themes or by editing the corresponding CSS files.

\subsubsection{Color Themes}
The backend interface offers a user-friendly way to change the colors of the whole shop. The user can choose from predefined themes or change the color for each element class himself. Furthermore it shows a preview of the changes in the background as figure \ref{fig:colors} shows.

\begin{figure}[H]
\begin{center}
\includegraphics[scale=0.45]{images/oxidcolors.png}
\end{center}
\caption{Oxid eShop backend: Color settings}
\label{fig:colors}
\end{figure}

Using the color editor everything was changed to a nice green color for the GreenGadget shop.

\subsubsection{Templates}
A template specifies where contents are displayed: It is a design model with placeholders. These placeholders are filled with content.

For example the template \textit{details.tpl} is used for showing a single product. It sets that the product picture is shown on the top left, that the name, product name, short description and price are shown on the top right and so on. There are placeholder for the product picture, name, product number etc. These placeholders are filled with the values from the product currently viewed.


\begin{code}
\lstset{language=HTML, basicstyle=\tiny, caption=Template for showing the product name: \textit{details.tpl}, captionpos=b, label=lst:tplrating}
\begin{lstlisting}
<h1 id="test_product_name" class="fn">
	[{$product->oxarticles__oxtitle->value}] [{$product->oxarticles__oxvarselect->value}]
</h1>
\end{lstlisting}
\end{code}

The placeholders are processed using the Smarty template engine. With Smarty tags, information from the shop is integrated into templates. Smarty-Tags begin with [{ and end with }].
Smarty is also used for simple program structures like if statements and loops.

Several templates were modified for the GreenGadget shop like the ones for displaying the footer, header, newsletter and e-mail.

\subsubsection{Cascading Stylesheets (CSS)}
The templates contain HTML code similar to the CSS pages described in the previous section. How the HTML elements are designed is defined by CSS. All CSS definitions are in the file \textit{oxid.css}.

Cascading stylesheets can be used to change further details of the shop's look, like text styles, margins and orientation of elements. The default theme CSS fits nice except of the tag cloud which did not show up properly. Tags in the tag cloud on the start page are shown in different sizes depending on the total number of products which are assigned to a specific tag. 

\begin{code}
\lstdefinelanguage{CSS}
{morekeywords={color,background,margin},
sensitive=false,
morecomment=[l]{//},
morecomment=[s]{/*}{*/},
morestring=[b]",
} 
\lstset{language=CSS, basicstyle=\tiny, caption=CSS tag settings: \textit{oxid.css}, captionpos=b, label=lst:css}
\begin{lstlisting}
/* Tags */
#body .box .tags {text-align: center;}
#body .box .tags a{line-height: 100%;padding:0 .2em;cursor: pointer;color:#000;}
#body .box .tags a.sel{color:green;font-weight: bold;}
#body a.tagitem_100 {white-space: nowrap; font-size: 100%;}
#body a.tagitem_200 {white-space: nowrap; font-size: 200%;}
#body a.tagitem_300 {white-space: nowrap; font-size: 300%;}
#body a.tagitem_400 {white-space: nowrap; font-size: 400%;}
\end{lstlisting}
\end{code}

The resulting tag cloud can be seen in figure \ref{fig:oxidsettings}. Most products are tagged with ``Solar'' and thus the HTML element containing the text is assigned to the \textit{tagitem\_400} class which is displayed four times bigger than normal text.
